<template>
	<view class="store-display">
		<view class="cu-custom" :style="{height: wanlsys.height + 'px' }">
			
			<view class="cu-bar fixed bg-white" :style="{ height: wanlsys.height + 'px', paddingTop: wanlsys.top + 'px'}">
				<view class="action fanhui" @tap="$wanlshop.back(1)"><text class="wlIcon-fanhui1"></text></view>
				<span class="cu-title">商城展示</span>
				<!-- #ifndef MP -->
				<view class="action" @tap="showModal('menu')">
					<text class="wlIcon-gengduo"></text>
					<view class="cu-tag badge" v-if="( statistics.notice.notice + statistics.notice.order + statistics.notice.chat + statistics.order.pay + statistics.order.delive + statistics.order.receiving + statistics.order.evaluate + cart.cartnum ) > 0">{{( statistics.notice.notice + statistics.notice.order + statistics.notice.chat + statistics.order.pay + statistics.order.delive + statistics.order.receiving + statistics.order.evaluate + cart.cartnum )}}</view>
				</view>
				<!-- #endif -->
			</view>
		</view>		
		
		<view class="shop-list">
			<view class="shop-list-item" v-for="(item ,index) in shopList.data" :key="index" @tap="toIndex(item.id)">
				<view class="shop-item-top">
					<view class="shop-item-top-img">
						<!-- <image :src="item.avatar" mode="widthFix"></image> -->
						<image :src="$wanlshop.oss(item.avatar)" mode="widthFix"></image>
					</view>
					<view class="shop-item-top-conter">
						<view class="shop-item-top-conter-l">
							<view>{{item.shopname}}</view>
							<view>店长：{{item.user.nickname}}</view>
						</view>
						<view class="shop-item-top-conter-r">
							距离{{item.distance}}
						</view>
					</view>
				</view>
				<view class="shop-item-bottom">
					{{item.city + item.shop_config.address}}
				</view>
				<text class="wlIcon-fanhui2"></text>
			</view>
		</view>
		
		<!-- 模态框 -->
		<view class="WANL-MODAL">
			<view class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''" @tap="hideModal">
				<view class="wanl-modal-menu cu-dialog" @tap.stop="">
					<wanl-direct  @change="hideModal"/>
				</view>
			</view>
			<!-- 分享 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<wanl-share 
						:scrollAnimation="scrollAnimation" 
						shareTitle="我发现了一个很好的线上购物商城，这是商城类目" 
						shareText="品质好而且很省钱如果自己在上面购买，每年可以省下1%~40%的钱" 
						:image="$wanlshop.appstc('/common/logo.png')"
						:href="common.appConfig.domain+'/pages/tabBar/category/category?QRtype=category'"
					@change="hideModal"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			wanlsys: this.$wanlshop.wanlsys(),
			height: 0, //scroll-view高度
			currentTab: 0, //预设当前项的值
			scrollTop: 0 ,//tab标题的滚动条位置
			modalName: null,
			scrollAnimation: 300,
			shopList:{}, // 商家列表信息
			page:1,
			lastPage:1
		};
	},
	computed: {
		...mapState(['common','statistics','cart'])
	},
	onLoad() {
		//获取商家门店列表
		this.getUserAddress();
		// #ifdef APP-PLUS
		this.height = this.wanlsys.windowHeight + this.wanlsys.windowBottom - this.wanlsys.height;
		// #endif
		// #ifdef H5
		this.height = this.wanlsys.windowHeight + this.wanlsys.windowBottom - this.wanlsys.height - 50;
		// #endif
		// #ifdef MP
		this.height = this.wanlsys.windowHeight - this.wanlsys.height;
		// #endif
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		this.height = this.height - uni.upx2px(180);
	},
	methods: {
		// 获取商家门店列表
		getUserAddress() {
			uni.showLoading({
				title: "加载中"
			});
			const self = this;
			uni.getLocation({
				altitude: true,
				success: res=> {
					let { longitude, latitude} = res;
					// self.longitude = longitude;
					// self.latitude = latitude
					// 获取订单
					self.$api.get({
						url: `${self.$wanlshop.config('appurl')}/wanlshop/shop/lis`,
						data: {
							longitude: longitude,
							latitude: latitude,
							page: this.page
						},
						header: { token: this.$store.state.user.token },
						success: resData => {
							self.shopList = resData;
							uni.hideLoading();
							// self.$forceUpdate();
						}
					});
				}
			})
		},
		// 返回首页
		toIndex(id){
			
			this.$api.get({
				url: `${this.$wanlshop.config('appurl')}/wanlshop/shop/setuserselect`,
				data: {
					shop_id:id
				},
				header: { token: this.$store.state.user.token },
				success: resData => {
					console.log(1230,resData)
					uni.reLaunch({
						url:"../../tabBar/category/category"
					})
					// this.$forceUpdate();
				}
			});
		},
		// 弹出层
		showModal(name) {
			// 滚动下分享
			if(name == 'share' && this.modalName != 'share'){
				setTimeout(() => {
					this.scrollAnimation= 0;
				}, 300);
			}
			this.modalName = name;
		},
		hideModal(name) {
			if (name) {
				this.showModal(name);
			}else{
				this.modalName = null;
			}
		},
	},
	onReachBottom() {
		if(this.page<this.lastPage){
			this.page++;
			this.getUserAddress();
		}

	}
}
</script>

<style>
	.action.fanhui{
		position: absolute;
		left: 20rpx;
	}
	.store-display{
		background: #ffffff;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.shop-item-top-img{
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.shop-list{
		padding: 32rpx;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.shop-list-item{
		width: 687rpx;
		height: 243rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid #F6F6F6;
		padding: 40rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		position: relative;
	}
	.shop-item-top{
		display: flex;
	}
	.shop-item-top-conter{
		margin-left: 42rpx;
		display: flex;
		flex: 1;
	}
	.shop-item-top-conter-l{
		margin-top: -8rpx;
	}
	.shop-item-top-conter-l view:nth-child(1){
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		margin-bottom: 10rpx;
	}
	.shop-item-top-conter-l view:nth-child(2){
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #A6A6A6;		
		margin-bottom: 10rpx;
	}
	.shop-item-top-conter-r{
		margin-left: auto;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF4400;
	}
	.shop-item-bottom{
		margin-left: 130rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #575757;
		margin-right: 28rpx;
	}
	.shop-list-item .wlIcon-fanhui2{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 14rpx;
	}
	
	.cu-custom .cu-bar{
		z-index: 99;
		background: #FD8464;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cu-title{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.action{
		margin-left: auto;
	}
</style>
